body, ul, li, h1, h2, h3, h4, h5, h6 {
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none !important;
    color: #000;
}

ul {
    list-style: none;
}
html {
    font-size: 100px;
}

#content{

    display:flex;
    justify-content:center;
    align-items:center;
    background:linear-gradient(to top,#08054b,#000)
}

#stacks{
    width:1688.5px;
    height:800px;
    background-position:center center;
    display:flex;
}

.stack {
    width: 154px;
    height: 800px;
    display: block;
    background: url("../img/banner1.jpg");
    background-size: cover;
    background-position-x: calc(var(--i)*10%);
    flex: 1;
    transform: rotateY(90deg);
    transition: 0.8s;
    -webkit-animation: show 2s 1 linear;
    animation: show 2s 1 linear;
    transform: rotate(0deg);
}
@keyframes show{
    0% {
        -webkit-transform: rotate(90deg);
        transform: rotateY(90deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotateY(0deg);
    }
}



.more{
    margin:0;
    padding:0;
    
}
.box{
    width:1500px;
    height:800px;
    margin:200px 90px;
    overflow:hidden;
    transition:all 0.3s;
    margin-top:0;
}
.box li{
    list-style:none;
    float:left;
    position:relative;
    width:375px;
    height:800px;
    transition:all 0.3s;
}

.box li .text{
    position:absolute;
    left:0;
    bottom:0;
    font-size:16px;
    color:white;
    width:100%;
    height:30px;
    text-align:center;
    line-height:30px;
}

.box:hover li{
    width:100px;
}

.box li:hover{
    width:1000px;
}


.special_text {
    background: url(https://media.giphy.com/media/3o6Ztb45EYezY9x9gQ/giphy.gif);
    background-size: contain;
    background-position: top left;
    -webkit-background-clip: text;
    color: transparent;
    font-size: 200px;
    font-weight: bold;
    font-family: sans-serif;
    text-align:center;
    margin:10px auto;
}


